<script setup>
import {PerfectScrollbar} from 'vue3-perfect-scrollbar'
import {VForm} from 'vuetify/components/VForm'
import {defineEmits, ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import showTost from "@/components/toast/index.js";

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  detailData: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    default: '详情'
  },
})

const emit = defineEmits(['update:isDrawerOpen','onHandleEdit','onHandleDelete'])

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}

const refVForm = ref()
const resetForm = () => {


  emit('update:isDrawerOpen', false)
}

const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refVForm.value?.reset()
    refVForm.value?.resetValidation()
  })
}
const form = ref({})
const assignmentData = () => {
  console.log(props.detailData)
  form.value = JSON.parse(JSON.stringify(props.detailData))
}

import {storeToRefs} from "pinia"
import {useAppStore} from "../../../store/app"

const appStore = useAppStore()

const {nationArr, sexArr} = storeToRefs(appStore)
watch(() => props.isDrawerOpen, () => {
  assignmentData()
})
const isEdit = ref(false)
let sexList = ref(['男', '女'])

const onHandleEditData = async () => {
  if (isEdit.value === true) {

    const {data} = await useApi('/admin/Api.Teacher/add').post({...form.value})
    if(data.value.status==200){
      emit('onHandleEdit')
      showTost("修改成功", {duration: 3000, type: "success"})
      emit('update:isDrawerOpen', false)
      isEdit.value = false
    }
  } else {
    isEdit.value = true
  }
}
const updatePassword = async () => {
  const {data} = await useApi('/admin/Api.Teacher/resetPwd').post({
    teacher_id: props.detailData.teacher_id,
    password: '000000'
  })
  if(data.value.status==200){
    showTost("重置密码成功", {duration: 3000, type: "success"})

    emit('onHandleEdit')
  }
}
const onDelete = () => {
  emit('onHandleDelete',form.value)
}
const required = (value, name) => !!value || `${name}为必填字段`;

</script>

<template>
  <VNavigationDrawer
    :model-value="props.isDrawerOpen"
    temporary
    location="end"
    width="370"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Header -->
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />
    <VDivider/>

    <VCard flat>
      <PerfectScrollbar
        :options="{ wheelPropagation: false }"
        class="h-100"
      >
        <VCardText style="block-size: calc(100dvh - 5rem);">
          <VForm
            :disabled="!isEdit"
            ref="refVForm"
            @submit.prevent=""
          >
            <VRow>
              <VCol>
                <div class="text-body-1 font-weight-medium text-high-emphasis">
                  基本信息
                </div>
              </VCol>

              <VCol cols="12">
                <VRow>
                  <VCol cols="12">
                    <VTextField
                      v-model="form.real_name"
                      label="姓名"
                      :rules="[(val)=>required(val,'姓名')]"
                      placeholder="请输入姓名"
                    />
                  </VCol>
                </VRow>
              </VCol>
              <VCol cols="12">
                <VRow>
                  <VCol cols="6">
                    <VSelect
                      v-model="form.sex"
                      :items="sexList"
                      item-title="title"
                      item-value="title"
                      placeholder="请选择性别"
                      :rules="[(val)=>required(val,'性别')]"
                      label="性别"
                      class="input-width-height"
                    />
                  </VCol>
                  <VCol cols="6">
                    <VSelect
                      v-model="form.nation"
                      :items="nationArr"
                      item-title="title"
                      item-value="title"
                      placeholder="请选择民族"
                      label="民族"
                      :rules="[(val)=>required(val,'民族')]"
                      class="input-width-height"
                    />
                  </VCol>
                </VRow>
              </VCol>
              <VCol cols="12">
                <VRow>
                  <VCol cols="6">
                    <AppDateTimePicker
                      class="input-width-height"
                      v-model="form.birth_time"
                      label="出生日期"
                      placeholder="请选择出生日期"
                      :rules="[(val)=>required(val,'出生日期')]"
                    >
                      <template v-slot:label>
                        <span>出生日期</span>
                      </template>
                    </AppDateTimePicker>
                  </VCol>
                  <VCol cols="6">
                    <AppDateTimePicker
                      class="input-width-height"
                      v-model="form.entry_time"
                      label="入职日期"
                      placeholder="请选择入职日期"
                      :rules="[(val)=>required(val,'入职日期')]"
                    >
                      <template v-slot:label>
                        <span>入职日期</span>
                      </template>
                    </AppDateTimePicker>
                  </VCol>
                </VRow>
              </VCol>
              <VCol cols="12">
                <div class="text-body-1 font-weight-medium text-high-emphasis">
                  拓展信息
                </div>
              </VCol>

              <VCol cols="12">
                <VTextField
                  v-model="form.graduate_school"
                  label="毕业院校"
                  :rules="[(val)=>required(val,'毕业院校')]"
                  placeholder="请输入毕业院校"
                />
              </VCol>
              <VCol cols="12">
                <VRow>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.graduate_major"
                      label="毕业专业"
                      :rules="[(val)=>required(val,'毕业专业')]"
                      placeholder="请输入毕业专业"
                    />
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.regis_address"
                      label="户口地址"
                      :rules="[(val)=>required(val,'户口地址')]"
                      placeholder="请输入户口地址"
                    />
                  </VCol>
                </VRow>
              </VCol>
              <VCol cols="12">
                <VTextField
                  v-model="form.home_address"
                  label="家庭住址"
                  :rules="[(val)=>required(val,'家庭住址')]"
                  placeholder="请输入家庭住址"
                />
              </VCol>
              <VCol cols="12">
                <VTextField
                  v-model="form.id_card"
                  type="number"
                  placeholder="身份证号码"
                  :rules="[(val) => required(val, '身份证号码'), (val) => val.length === 18 || '身份证号码必须是18位']"
                  label="请输入身份证号码"
                />
              </VCol>

              <VCol cols="12">
                <VTextField
                  v-model="form.phonenumber"
                  label="手机号"
                  :rules="[(val) => required(val, '手机号'), (val) => val.length === 11 || '手机号必须是11位']"
                  placeholder="请输入手机号"
                />
              </VCol>
              <VCol cols="12">
                <VRow>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.emergency_contact"
                      label="紧急联系人"
                      :rules="[(val)=>required(val,'紧急联系人')]"
                      placeholder="请输入紧急联系人"
                    />
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.emergency_phone"
                      label="联系人手机号"
                      :rules="[(val) => required(val, '联系人手机号'), (val) => val.length === 11 || '联系人手机号必须是11位']"
                      placeholder="请输入联系人手机号"
                    />
                  </VCol>
                </VRow>
              </VCol>

              <VCol cols="12" v-if="form.personal_photo">
                <div class="mb-1">个人照片</div>
                <img style="width:160px;height:160px" :src="form.personal_photo" alt="">
              </VCol>
              <VCol cols="12">
                <div class="d-flex justify-end" style="margin-top:auto">
                  <VBtn
                    type="submit"
                    color="primary"
                    class="me-4"
                    @click="updatePassword"
                  >
                    重置密码
                  </VBtn>
                  <VBtn
                    color="primary"
                    class="me-4"
                    @click="onHandleEditData"
                  >
                    {{ isEdit == true ? '保存' : '编辑'}}
                  </VBtn>
                  <VBtn
                    color="error"
                    variant="outlined"
                    @click="onDelete"
                  >
                    删除
                  </VBtn>
                </div>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </PerfectScrollbar>
    </VCard>
  </VNavigationDrawer>
</template>

<style lang="scss">
.v-navigation-drawer__content {
  overflow-y: hidden !important;
}
</style>
